<style type="text/css">
	ul.switch-bottom{
		margin-bottom:30px;
	}
</style>

<script type="text/javascript">
(function(){
	<%-
		local para = {
			light = {config = {}}
		}

		local result = tpl_get_data(para)
		local enable = result[K_MODULE].light.config.enable
	-%>
	var enable = '<%=enable%>';

	initSwitch("Switch", enable, onSwitchClick);

	function onSwitchClick(state, init){
		if(!init){
			var para = {};
			para.light = {};
			para.light.config = {enable:$("#Switch").attr("data-value")};

			showLoading(label.saving);
			apiSet(para, function(ret){
				$.setTimeout(function(){
					closeLoading();
				}, ret[K_MODULE].light.config.wait_time * 1000);
			});
		}
	}
})();
</script>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/led.png?_=20170809165512" />
			<span class="help-title">{%label.ledTip%}</span>
		</li>
		<li class="summary">{%helpStr.light%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/led.png?_=20170809165512" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.ledSet%}</span>
	</a>
</div>
<div class="set-con below-head">
	<ul class="set-con set-con-switch switch-bottom">
		<p class="set-con-desc">
			<label class="tip-lbl">{%label.ledTip%}</label>
			<span id="Switch" class="switch">
				<i class="switch-circle icon_select_off"></i>
			</span>
		</p>
	</ul>
</div>